<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子向父传递数值</title>
  </head>
  <body>
    <pre>
        插槽：就是可以向模板中插入一些信息
             插槽中的slot是一个占位符，如果view试图自定义标签内部没有内容会显示slot内部内容，如果自定义标签有内容则对slot内容进行替换

        具名插槽
                具有名字的插槽，就是给slot标签田家庵name
                将组件标签中包裹的内容放到相同name值的地方，如果没有name会被默认的slot（没有name属性）收入
        template是vue的api，包裹标签在自己身上写上name
    

注意：slot只是一个占位符，内部尽量不要添加内容，就算写了，也会被替换
      slot获取view数据
    </pre>
    <div class="box">
      <alert-box>
        hhhhhhh
        <p>子组件中还可以继续太难吃一些其他标签，将内容展示到子组件中</p>
      </alert-box>
      <yes>
        <template slot="header">
          <p>这是header</p>
          <p>这是footer</p>
        </template>
      </yes>

      <button @click="get">this</button>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      //默认插槽
      Vue.component('alert-box', {
        data: function () {
          return {}
        },
        template: `
        <div>
        <p>插槽</p>
        <slot>这是插槽</slot>
        </div>
        `,
      })
      //具名插槽
      Vue.component('yes', {
        template: `
        <div>
        <p>
            <slot name='header'></slot>
            <slot name='header'></slot>
        </p>
       
        <p>
            <slot name='footer'></slot>
        </p>
        </div>
        `,
      })
      new Vue({
        el: '.box',
        data: {},
        methods: {
          get() {
            function hh() {
              console.log(this)
            }
            hh()
            console.log(this)
          },
        },
      })
    </script>
  </body>
</html>
